<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>创建角色</span>
</div>

<el-form ref="form" :model="form" :rules="rules" label-width="180px">

  <el-form-item label="角色名称：" prop="role_name" >
    <el-input v-model="form.role_name" style="width:300px;"></el-input>
  </el-form-item>

  <el-form-item label="角色id：" prop="role_id" >
    <el-input v-model="form.role_id" style="width:300px;"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit()">立即创建</el-button>
  </el-form-item>

</el-form>

</el-card>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'createRole',
	
	data () {
		return {
		  	form : {
		  		role_name : '',
		  		role_id : '',
		  	},

		  	rules: {
				role_name: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
				],
				role_id: [
					{ required: true, message: '请输入角色id', trigger: 'blur' },
				],
			},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		onSubmit () {
			this.$refs['form'].validate((valid) => {
	          if (valid) {
	            this.$http({
					fun : 'createRole',
					role_name : this.form.role_name,
					role_id : this.form.role_id,
					cb : res => {
						console.log(res);
						this.$router.push({
							name : 'roleList',
						});
					}
				});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
